'use client'

import localFont from 'next/font/local'
import './globals.css'
import { Suspense, useEffect } from 'react'
import { Spin } from 'antd'
import checkUserRole from '@/hooks/auth'
import { WebVitals } from './_components/web-vitals'

import { setDefaults } from '@/sdk'
import request from '@/lib/request'
import { RequestOptions } from 'pontx-sdk-core'
import { Providers } from './providers'
import AntdProviders from './AntdProviders'

setDefaults({
  pontxRequester: {
    request: (fetchOptions: RequestOptions) =>
      request(
        `${process.env.NEXT_PUBLIC_GATEWAY_URL}${fetchOptions.url}`,
        fetchOptions.body,
        {
          method: fetchOptions.apiMeta?.method,
          headers: fetchOptions.headers
        }
      )
  }
})

const geistSans = localFont({
  src: '../lib/fonts/GeistVF.woff',
  variable: '--font-geist-sans'
})

const geistMono = localFont({
  src: '../lib/fonts/GeistMonoVF.woff',
  variable: '--font-geist-mono'
})

export default function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode
  user: React.ReactNode
  admin: React.ReactNode
}>) {
  const role = checkUserRole()

  useEffect(() => {
    document.body.classList.add(
      `${geistSans.variable}`,
      `${geistMono.variable}`
    )
  }, [])

  return (
    <html lang="en">
      <body>
        <Providers themeProps={{ attribute: 'class' }}>
          <Suspense
            fallback={<Spin tip="Loading..." percent="auto" delay={3000} />}
          >
            {/* <Header /> */}
            <WebVitals />
            <AntdProviders>{children}</AntdProviders>
          </Suspense>
        </Providers>
      </body>
    </html>
  )
}
